<template>
    <div>
        <panle title='学员列表' content="看课-学员列表">
        </panle>
        <div>
            <el-row :span="24" class="pt20">
                <el-col :span="24">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="搜索员工">
                            <el-input v-model="formInline.keyword" clearable size="mini"
                                placeholder="请输入学员姓名|账号|手机号"></el-input>
                        </el-form-item>
                        <el-form-item label="所在班级">
                            <el-select v-model="formInline.class_id" filterable size="mini" clearable placeholder="请选择">
                                <el-option v-for="item in class_list" :key="item.id" :label="item.class_name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="学员状态">
                            <el-select v-model="formInline.status" size="mini" clearable placeholder="请选择">
                                <el-option v-for="item in status_list" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="formInline.status" label="使用状态">
                            <el-select v-model="formInline.expire_status" size="mini" clearable placeholder="请选择">
                                <el-option v-for="item in EXPIRE_STATUS_LIST" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="购课标签">
                            <SearchSelect size="mini" multiple="true" :remoteApi="getQywxTagList" clearable
                                @handleChange="handleTagChange" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="mini" @click="serach">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>
        <el-row class="pt10">
            <pers-button icon="" size="mini" @click="add" perms="kanke:education:student:add" type="primary"
                label="添加学员"></pers-button>
        </el-row>
        <el-table :data="tableData" style="margin-bottom: 20px;width: 100%;" row-key="id" border stripe
            default-expand-all v-loading="loading">
            <el-table-column prop="nickname" align="center" width="150" label="学员名称">
                <template slot-scope="scope">

                    <el-button type="text" :label="scope.row.nickname"
                        v-if="hasPermission('kanke:education:student:detail')" @click="handleDetail(scope.row)">{{
                            scope.row.nickname }}
                    </el-button>
                    <el-button type="text" :label="scope.row.nickname" v-else>{{ scope.row.nickname }}</el-button>
                </template>

            </el-table-column>
            <el-table-column prop="account" align="center" label="学员账号" width="150"></el-table-column>
            <el-table-column prop="course" align="center" :show-overflow-tooltip="true" min-width="200" label="购买课程">
                <template slot-scope="scope">
                    <template v-if="scope.row.course.length >= 0">
                        <div v-for="(item, index) in scope.row.course" :key="index">
                            <el-tag>{{ `${index + 1} - ${item}`
                                }}</el-tag><br>
                        </div>
                    </template>
                </template>
            </el-table-column>

            <el-table-column prop="mobile" align="center" label="手机号" width="150"></el-table-column>
            <el-table-column prop="class_name" align="center" label="所在班级" width="150"></el-table-column>
            <el-table-column prop="status" align="center" label="学员状态" width="150">

            </el-table-column>
            <el-table-column prop="two_yaoyue_num" align="center" label="使用状态" width="100">
                <template slot-scope="scope">
                    {{ scope.row.status === '已激活' ? getEndStatus(scope.row.end_date) : '-' }}
                </template>
            </el-table-column>
            <el-table-column prop="end_date" align="center" label="使用app 截止日期" width="150"></el-table-column>
            <el-table-column prop="tags" align="center" label="企微标签" width="180">
                <template slot-scope="scope">
                    <template>
                        <div v-if="scope.row.tags">
                            <div class="sellipsis">
                                <el-tag size="mini" v-for="(item, index) in scope.row.tags.split(',')" :key="index">{{
                                    item }}</el-tag>
                            </div>
                            <el-tag size="mini" type="success" @click="handlePreview(scope.row.tags)">预览</el-tag>
                        </div>
                    </template>

                </template>
            </el-table-column>
            <el-table-column prop="sc_remark" align="center" label="学员备注" width="180">
                <template slot-scope="scope">
                    <template>
                        <div v-if="scope.row.sc_remark">
                            <div class="sellipsis">
                                {{ scope.row.sc_remark }}
                            </div>
                            <el-tag size="mini" type="success" @click="handlePreview(scope.row.sc_remark)">预览</el-tag>
                        </div>
                    </template>

                </template>
            </el-table-column>
            <el-table-column prop="add_wtime" align="center" width="180" label="加企微时间">
            </el-table-column>
            <el-table-column prop="handle" align="center" fixed="right" width="120" label="操作">
                <template slot-scope="scope">
                    <PersButton type="text" perms="kanke:education:student:assign-classes" label="分配班级"
                        @click="handleAssign(scope.row)">
                    </PersButton>
                    <PersButton type="text" perms="kanke:education:student:edit" label="编辑"
                        @click="handleEdit(scope.row)">
                    </PersButton><br />
                    <PersButton type="text" perms="kanke:education:student:reset-pwd" label="重置密码"
                        @click="handleResetPwd(scope.row)">
                    </PersButton>
                    <PersButton type="text" perms="kanke:education:student:del" label="删除"
                        @click="handleDel(scope.row)">
                    </PersButton>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageInfo.pageNumber" :page-sizes="pageSizes" :page-size="pageInfo.pageSize" background
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <AddForm v-if="showForm" :visible.sync="showForm" @handleReload="init()" :id="editId" :key="editId" />
        <AssignClass v-if="showAssign" :visible.sync="showAssign" @handleReload="init()" :detail="assignItem"
            :key="`${assignItem.id}-${assignItem.class_id}`" />
    </div>
</template>

<script>
import { hasPermission, isShow } from '@/common/permission';
import { getStudentList, deleteStudent, getQywxTagList } from '@/api/kanke/student'
import { resetPwd } from '@/api/kanke/user'

import { getClassData } from '@/api/kanke/gradeclass/gradeclass'
import { EXPIRE_STATUS_LIST, EXPIRE_STATUS_MAP } from '@/constant/kanke/student'
import { pageSizes } from '@/constant/index';
import { getEndStatus } from '@/common/common';
import AddForm from './components/AddForm.vue';
import AssignClass from './components/AssignClass.vue';
import SearchSelect from './components/SearchSelect.vue';

export default {
    name: "KanKeStudentList",
    components: {
        AddForm,
        AssignClass,
        SearchSelect
    },
    data() {
        return {
            formInline: {
                expire_status: '',
                class_id: '',
                status: '',
                tagIdArr: []

            },
            pageInfo: {
                pageNumber: 1,
                pageSize: 10
            },
            total: 0,
            class_list: [],// 班级列表
            EXPIRE_STATUS_LIST,// 有效期列表
            EXPIRE_STATUS_MAP,
            status_list: [
                {
                    value: 0,
                    label: '未激活'
                }, {
                    value: 1,
                    label: '使用中'
                }],//学员状态
            loading: false,
            tableData: [],
            pageSizes,
            showForm: false,
            editId: 0,
            showAssign: false,
            assignItem: {},// 当前被分配的学员
        }
    },
    created() {
        this.init()
    },
    methods: {
        hasPermission,
        isShow,
        getEndStatus,
        getQywxTagList,

        async init() {
            this.editId = 0;
            this.loading = true;
            let params = Object.assign({}, this.pageInfo, this.formInline);
            getClassData().then(res => {
                if (res.code === 200) {
                    this.class_list = res.data.list;
                }
            })

            const res = await getStudentList(params)

            if (res.code == 200) {
                this.tableData = res.data.data
                this.total = res.data.total
                this.pageInfo.pageSize = res.data.per_page
                this.pageInfo.pageNumber = res.data.current_page
            }
            this.loading = false
        },
        serach() {
            this.formInline.keyword;
            this.init();
        },
        handleSizeChange(e) {
            this.pageInfo.pageSize = e;
            this.init()
        },
        handleCurrentChange(e) {
            this.pageInfo.pageNumber = e;
            this.init()
        },
        add() {
            this.editId = 0
            this.showForm = true
        },
        handleEdit({ user_id }) {
            this.editId = user_id
            this.showForm = true
        },
        handleResetPwd({ user_id }) {
            // 二次弹框提示是否操作
            this.$confirm('请确定是否将密码重置为：888888 ?', '重置密码', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await resetPwd({ user_id })
                if (res.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '重置密码成功!'
                    });
                }

            }).catch(() => {
                // this.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });
            });

        },
        handleAssign(row) {
            this.showAssign = true;
            this.assignItem = { ...row }
        },
        handleDel({ user_id, nickname }) {
            this.$confirm(`请确定是否将 ${nickname} 学员 删除 ?`, '删除学员', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await deleteStudent({ user_id })
                if (res.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.init()
                }
            }).catch(() => {

            });
        },
        handleDetail({ user_id }) {
            this.$router.push({
                name: `DetailInfo`,
                query: { user_id }
            })
        },
        handleTagChange(data) {
            this.formInline.tagIdArr = [...data]
        },
        handlePreview(str) {
            if (str) {
                this.$alert(str, '预览', {
                    confirmButtonText: '确定',
                    // callback: action => {
                    //     this.$message({
                    //         type: 'info',
                    //         message: `action: ${action}`
                    //     });
                    // }
                });
            }

        }
    }
}
</script>

<style lang="scss" scoped>
.demo-form-inline {
    ::v-deep .el-select .el-input {
        width: 200px;
    }
}

.sellipsis {
    // 超过三行 显示省略号
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    -webkit-box-orient: vertical;
}
</style>